import React from 'react'
import { Form, Input, Upload, Button, message, Cascader } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import styles from './index.less'

export default () => {

    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };

    const options = [
        {
            value: 'anhui',
            label: '安徽',
            children: [
                {
                    value: 'fuyang',
                    label: '阜阳市',
                    children: [
                        {
                            value: 'funan',
                            label: '阜南县',
                        },
                    ],
                },
            ],
        }
    ];

    const onChange = (value: any) => {
        console.log(value);
    }

    return (
        <>
            <div className={styles.cardDiv}>
                <nav className={styles.navTitle}>企业信息</nav>
                <div className={styles.cardContent}>
                    <Form.Item label="公司名称" name="company_name">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="公司地址" name="company_address">
                        <Cascader options={options} onChange={onChange} placeholder="选择公司地址" style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="详细地址" name="detail_address">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                </div>
            </div>

            <div className={styles.cardDiv}>
                <nav className={styles.navTitle}>联系人信息</nav>
                <div className={styles.cardContent}>
                    <Form.Item label="法人姓名" name="law_username">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="法人联系电话" name="law_mobile" help="请填写有效的手机号，如有问题可通过该手机号联系到商家">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                </div>
            </div>

            <div className={styles.cardDiv}>
                <nav className={styles.navTitle}>企业资质</nav>
                <div className={styles.cardContent}>
                    <Form.Item label="统一社会信用码" name="business_licence_no">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="营业执照电子版" name="business_licence_electron" valuePropName="fileList" getValueFromEvent={handleUploadChange} help="请上传营业执照传真图片或者照片，营业执照包括边框内容要全部显示，不能遮挡">
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button><UploadOutlined /> Upload</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="法定经营范围" name="business_sphere" help="经营范围（可填写营业执照上的经营范围内容）">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="税务登记证号" name="tax_register_no" help="税务登记证号即为三证合一之后的营业执照上的统一社会信用代码，三证合一之前为税务登记证上的编码">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="税务登记证电子版" name="tax_register_electron" valuePropName="fileList" getValueFromEvent={handleUploadChange} help="税务登记证传真图片或者照片，包括边框在内的内容都需要显示">
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button><UploadOutlined /> Upload</Button>
                        </Upload>
                    </Form.Item>
                </div>
            </div>
            <div className={styles.cardDiv}>
                <nav className={styles.navTitle}>联系人身份证件</nav>
                <div className={styles.cardContent}>
                    <Form.Item label="法人身份证号" name="law_id_card">
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="法人身份证正面" name="law_id_card_front" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button>
                                <UploadOutlined /> Upload
                        </Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="法人身份证反面" name="law_id_card_back" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                        <Upload
                            action='http://127.0.0.1:8888/admin/tool/upload'
                            listType='picture'
                        >
                            <Button>
                                <UploadOutlined /> Upload
                        </Button>
                        </Upload>
                    </Form.Item>
                </div>
            </div>
            <div className={styles.cardDiv}>
                <nav className={styles.navTitle}>对公账户</nav>
                <div className={styles.cardContent}>
                    <Form.Item label="银行开户名" required name="bank_account_name" rules={[{ required: true, message: '银行开户名不能为空' }]}>
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="公司银行账号" required name="bank_account" rules={[{ required: true, message: '公司银行账号不能为空' }]}>
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="开户银行名称" required name="bank_name" rules={[{ required: true, message: '开户银行名称不能为空' }]}>
                        <Input style={{ width: "420px" }} />
                    </Form.Item>
                    <Form.Item label="开户银行所在地" required name="bank_address" rules={[{ required: true, message: '开户银行所在地不能为空' }]}>
                        <Cascader options={options} onChange={onChange} placeholder="选择开户银行所在地" style={{ width: "420px" }} />
                    </Form.Item>
                </div>
            </div>
        </>
    )
}